<template>
	<view class="lgmain animated fadeIn faster">
		<view class="position-relative">
			<view class="square position-absolute z-index-1 top-0 left-0">
				<image class="square rad-bottom z-index-1 position-absolute" style="opacity: .6;" mode="aspectFill" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/usrbg.jpg"></image>
				<view class="square rad-bottom z-index-10 bgmask position-relative"></view>
			</view>
			<view class="position-relative z-index-10" :style="{'paddingTop':$store.state.statusBarHeight+'px'}">
				<view :style="{'width': $store.state.titleBarWidth + 'px'}">
					<view class="d-flex d-flex-middle pl-3 pr-1" :style="{'height': $store.state.titleBarHeight + 'px'}">
						<view class="d-flex d-flex-middle pr-3" @click="showDrawer('showLeft')">
							<text class="iconfont icon-zhenhuichongtubiaozhizuo-kuozhan- font-bold colorfff"></text>
						</view>
						<view class="capsule1 rounded30 d-flex d-flex-center d-flex-middle" @click="gotoWallet">
							<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/m1.png" mode="heightFix" style="height: 26rpx;"></image>
							<text class="font24 ml-1">钱包</text>
						</view>
						<view class="capsule2 rounded30 d-flex d-flex-center d-flex-middle">
							<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/m3.png" mode="heightFix" style="height: 26rpx;"></image>
							<text class="font24 ml-1">等级</text>
						</view>
						<view class="capsule3 rounded30 d-flex d-flex-center d-flex-middle">
							<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/m4.png" mode="heightFix" style="height: 18rpx;"></image>
							<text class="font24 ml-1">贵族特权</text>
						</view>
					</view>
				</view>
				<view class="px-3 py-2 text-right mb-3">
					<text class="colorfff font26" v-if="$store.state.loginStatus">IP属地：辽宁</text>
					<view v-else style="height: 80rpx;"></view>
				</view>
				<view class="d-flex d-flex-center position-relative mb-2">
					<image class="rounded" mode="aspectFill" :src="$store.state.user.avatar" style="width: 120rpx;height: 120rpx;"></image>
				</view>
				<view class="mb-3 mt-5" v-if="$store.state.loginStatus">
					<view class="d-flex d-flex-center d-flex-middle colorfff mb-3">
						<view class="text-clamp mr-5" style="max-width: 230rpx;"><text class="colorfff font40 font-bold">{{$store.state.user.nickname}}</text></view>
						<view class="d-flex d-flex-middle mt-1">
							<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/sex.png" style="width: 30rpx;height: 30rpx;"></image>
							<text class="mx-1 font26">ID</text>
							<text class="font26 mr-5">{{$store.state.user.uid}}</text>
							
							<text class="iconfont icon-dian1 colorsuccess"></text>
							<text class="font26">在线</text>
							<text class="iconfont font22 icon-youjiantou mr-3"></text>
							<text class="iconfont icon-bianji"></text>
						</view>
					</view>
					
					<view class="colorfff font24 text-center px-5 text-clamp-two">
						{{$store.state.user.signature}}
					</view>
				</view>
				<view class="mb-10 d-flex d-flex-center" @click="goLogin" v-else>
					<text class="font36 colorfff font-bold">立即登录</text>
				</view>
				
				
				<view class="px-1 pb-2">
					<view class="rounded30 bg-fff p-2">
						<view class="d-flex px-3 d-flex-between d-flex-middle mb-5">
							
							<view style="height: 90rpx;" @click="OpenThumbUpFrame">
								<view class="d-flex d-flex-center d-flex-middle" style="height: 60rpx;">
									<text class="font40 font-bold color231816">0.7万</text>
								</view>
								<view class="d-flex d-flex-center d-flex-middle" style="height: 30rpx;">
									<text class="font26 color71">获赞</text>
								</view>
							</view>
							<text class="iconfont icon-shugang color9f"></text>
							<view style="height: 90rpx;" @click="gotoFollowPage">
								<view class="d-flex d-flex-center d-flex-middle" style="height: 60rpx;">
									<text class="font40 font-bold color231816">17</text>
								</view>
								<view class="d-flex d-flex-center d-flex-middle" style="height: 30rpx;">
									<text class="font26 color71">关注</text>
								</view>
							</view>
							<text class="iconfont icon-shugang color9f"></text>
							<view style="height: 90rpx;" @click="gotoFans">
								<view class="d-flex d-flex-center d-flex-middle" style="height: 60rpx;">
									<text class="font40 font-bold color231816">77</text>
								</view>
								<view class="d-flex d-flex-center d-flex-middle" style="height: 30rpx;">
									<text class="font26 color71">粉丝</text>
								</view>
							</view>
							<text class="iconfont icon-shugang color9f"></text>
							<view style="height: 90rpx;" @click="gotoVisitor">
								<view class="d-flex d-flex-center d-flex-middle" style="height: 60rpx;">
									<text class="iconfont icon-zuji- color231816"></text>
								</view>
								<view class="d-flex d-flex-center d-flex-middle" style="height: 30rpx;">
									<text class="font26 color71">足迹</text>
								</view>
							</view>
							<text class="iconfont icon-shugang color9f"></text>
							<view style="height: 90rpx;" @click="gotoBrowse">
								<view class="d-flex d-flex-center d-flex-middle" style="height: 60rpx;">
									<text class="font40 font-bold color231816">41</text>
								</view>
								<view class="d-flex d-flex-center d-flex-middle" style="height: 30rpx;">
									<text class="font26 color71">访客</text>
								</view>
							</view>
							
						</view>
						
						
						<view class="px-2 pb-2">
							<view class="player px-3 py-2 d-flex d-flex-middle d-flex-between mb-3">
								<view class="d-flex d-flex-middle">
									<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/m5.png" mode="heightFix" style="height: 50rpx;"></image>
									<text class="colorfff font30 ml-1">开通欢游超级玩家</text>
								</view>
								<view class="d-flex d-flex-middle">
									<text class="colorfff font24 mr">专属身份标识</text>
									<text class="iconfont font24 icon-arrow-right1 colorfff"></text>
								</view>
							</view>
							
							<view class="d-flex d-flex-between mb-3">
								<view class="g-item1 rounded20 d-flex d-flex-middle">
									<image class="rounded10 mr-1" src="https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/ed39ad04e7655cbea70fe406f70a7fe8/ed39ad04e7655cbea70fe406f70a7fe8.png" style="width: 46rpx;height: 46rpx;"></image>
									<text class="font24 mr color231816">王者荣耀</text>
									<text class="iconfont icon-youjiantou2 color71"></text>
								</view>
								<view class="g-item2 rounded20 d-flex d-flex-middle">
									<image class="rounded10 mr-1" src="https://gp-open-platform.cdn.bcebos.com/204407191619/7ab388e6baf921096b7a414e38f6ee40/gp-open-platform/upload/file/img/256771a610177f2695d7d5c94d6b05cc.png" style="width: 46rpx;height: 46rpx;"></image>
									<text class="font24 mr color231816">金铲之战</text>
									<text class="iconfont icon-youjiantou2 color71"></text>
								</view>
								<view class="g-item3 rounded20 d-flex d-flex-middle">
									<image class="rounded10 mr-1" src="https://gdown.baidu.com/appcenter/source/1396538632/cb06b8d26ddda8c0f792a0dc5a65b6e8/res/mipmap-xxxhdpi-v4/app_icon.png" style="width: 46rpx;height: 46rpx;"></image>
									<text class="font24 mr color231816">无间手游</text>
									<text class="iconfont icon-youjiantou2 color71"></text>
								</view>
							</view>
							
							<view class="d-flex d-flex-middle mb-4">
								<view class="position-relative">
									<text class="color231816 font36 font-bold">关于我</text>
									<text class="position-absolute iconfont icon-dian1 orange-color font30" style="top: -12rpx;right: -18rpx;"></text>
								</view>
								<view class="mx-3">
									<text class="color71">动态</text>
								</view>
								<view>
									<text class="color71">挚友</text>
								</view>
							</view>
							
							<view class="font36 mb-1 color000">账号等级</view>
							<view class="d-flex d-flex-between mb-2">
								<view class="level d-flex d-flex-column d-flex-middle mr-2">
									<text class="mb-1">魅力值</text>
									<image class="mb-1" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/level1.png" mode="heightFix" style="height: 120rpx;"></image>
									<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/sun.png" style="width: 26rpx;height:26rpx"></image>
								</view>
								
								<view class="level d-flex d-flex-column d-flex-middle mr-2">
									<text class="mb-1">财富值</text>
									<image class="mb-1" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/level2.png" mode="heightFix" style="height: 120rpx;"></image>
									<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/sun.png" style="width: 26rpx;height:26rpx"></image>
								</view>
								
								<view class="level d-flex d-flex-column d-flex-middle">
									<text class="mb-1">经验值</text>
									<image class="mb" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/level3.png" mode="heightFix" style="height: 120rpx;"></image>
									<text class="font-bold font22">Lv.30</text>
								</view>
							</view>
							
							<view class="font36 mb-2 color000" @click="gotoPersonal">MBTI性格</view>
							<view class="position-relative">
								<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/mbti.png" mode="widthFix" style="width: 660rpx;"></image>
								<view class="linerbg rounded30 position-absolute z-index-10 px-2 py-1" style="left: 36rpx;bottom: 30rpx;">
									<text class="colorfff font26">前往测试</text>
								</view>
							</view>
						</view>
					
					</view>
				</view>
			</view>
		</view>
		<uni-drawer ref="showLeft" mode="left" :mask-click="true">
			<view :style="{'paddingTop':$store.state.statusBarHeight+'px','height': $store.state.titleBarHeight + 'px'}"></view>
			<view class="px-3">
				<view class="d-flex d-flex-middle d-flex-between mb-5">
					<view @click="gotoGift">
						<text class="iconfont icon-liwu mr-3 color71"></text>
						<text class="font26">我的礼物</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="iconfont icon-dian1 orange-color"></text>
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				
				<view class="d-flex d-flex-middle d-flex-between mb-5" @click="gotoMytask">
					<view>
						<text class="iconfont icon-renwu1 mr-3 color71"></text>
						<text class="font26">我的任务</text>
					</view>
					<view>
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				
				<view class="d-flex d-flex-middle d-flex-between mb-5">
					<view>
						<text class="iconfont icon-fenlei mr-3 color71"></text>
						<text class="font26">活动中心</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="color999 font24 mr-1">0</text>
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				
				<view class="d-flex d-flex-middle d-flex-between mb-5" @click="Gotorecords">
					<view>
						<text class="iconfont icon-jilu mr-3 color71"></text>
						<text class="font26">我的记录</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				
				<view class="d-flex d-flex-middle d-flex-between mb-5" @click="gotoJoinIn">
					<view>
						<text class="iconfont icon-icon-ruzhu mr-3 color71"></text>
						<text class="font26">我要入驻</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				
				<view class="d-flex d-flex-middle d-flex-between mb-5">
					<view>
						<text class="iconfont icon-kefu mr-3 color71"></text>
						<text class="font26">我的客服</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				
				<view class="d-flex d-flex-middle d-flex-between mb-5">
					<view>
						<text class="iconfont icon-anquan2 mr-3 color71"></text>
						<text class="font26">安全中心</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				<view class="d-flex d-flex-middle d-flex-between mb-5" @click="gotoSecurity">
					<view>
						<text class="iconfont icon-anquan mr-3 color71"></text>
						<text class="font26">隐私与安全</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				
				<view class="d-flex d-flex-middle d-flex-between mb-5" @click="loginOut">
					<view>
						<text class="iconfont icon-shezhi font30 mr-3 color71"></text>
						<text class="font26">设置</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				
				<view class="d-flex d-flex-middle d-flex-between mb-5" @click="gotoAboutMe">
					<view>
						<text class="iconfont icon-guanyu mr-3 color71"></text>
						<text class="font26">关于我们</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goLogin(){
				uni.navigateTo({
					url:'/pagesMain/mplogin/mplogin'
				})
			},
			gotoAboutMe() {
				uni.navigateTo({
					url:'/pagesMain/aboutMe/aboutMe'
				})
			},
			gotoSecurity() {
				uni.navigateTo({
					url:'/pagesMain/security/security'
				})
			},
			gotoJoinIn() {
				uni.navigateTo({
					url:'/pagesMain/my-JoinIn/my-JoinIn'
				})
			},
			gotoFollowPage() {
				uni.navigateTo({
					url:'/pagesMain/My-FollowPage/My-FollowPage'
				})
			},
			gotoFans() {
				uni.navigateTo({
					url:'/pagesMain/my-fans/my-fans'
				})
			},
			gotoVisitor() {
				uni.navigateTo({
					url:'/pagesMain/my-browse/my-browse'
				})
			},
			gotoBrowse() {
				uni.navigateTo({
					url:'/pagesMain/my-visitor/my-visitor'
				})
			},
			gotoWallet() {
				uni.navigateTo({
					url:'/pagesMain/my-wallet/my-wallet'
				})
			},
			gotoPersonal() {
				uni.navigateTo({
					url: '/pagesMain/my-personality/my-personality'
				})
			},
			Gotorecords() {
				uni.navigateTo({
					url: '/pagesMain/my-records/my-records'
				})
			},
			OpenThumbUpFrame() {
				console.log(1);
			},
			loginOut(){
				// store.commit("logOut")
				// this.showDrawer('showLeft')
				// uni.switchTab({
				// 	url:'/pages/index/index'
				// })
				uni.navigateTo({
					url:'/pagesMain/my-setup/my-setup'
				})
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			gotoGift() {
				uni.navigateTo({
					url: '/pagesMain/mygifts/mygifts'
				})
			},
			gotoMytask() {
				uni.navigateTo({
					url: '/pagesMain/mytask/mytask'
				})
			}
		}
	}
</script>

<style scoped>
.lgmain{
	background-image: url('https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/yuebg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 100%;
	min-height: 100vh;
}
.bgmask{
	background-color: rgba(0, 0, 0, .4);
}
.rad-bottom{
	border-bottom-right-radius: 60rpx;
	border-bottom-left-radius: 60rpx;
}
.capsule1{
	background-color: #ffa6e0;
	height: 56rpx;
	color:#221816;
	padding-left: 20rpx;
	padding-right: 20rpx;
	margin-right: 20rpx;
}
.capsule2{
	background-color: #59dfaa;
	height: 56rpx;
	color:#221816;
	padding-left: 20rpx;
	padding-right: 20rpx;
	margin-right: 20rpx;
}
.capsule3{
	background-color: #dbd2ff;
	height: 56rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	color:#221816
}
.g-item1{
	background-color: #fceaf6;
	padding: 10rpx;
	width: 190rpx;
	height: 50rpx;
}
.g-item2{
	background-color: #f5f4fc;
	padding: 10rpx;
	height: 50rpx;
	width: 190rpx;
}
.g-item3{
	background-color: #eff3fc;
	padding: 10rpx;
	height: 50rpx;
	width: 190rpx;
}
.color231816{
	color:#231816
}
.color9f{color: #9f9f9f;}
.player{
	background-image: linear-gradient(to right, #ec65ce, #5daffe);
	border-radius: 15rpx
}
.level{
	width: 220rpx;
	padding-top: 30rpx;
	height: 210rpx;
	background-color: #f5f5f5;
	border-radius: 20rpx;
}
</style>
